<template>
  <div>
    <el-row type="flex" style="padding-left: 20px">
      <el-col :span="10">
        <h2 class="subtitle" style="margin-top: 15px; margin-left: 5px">
          <el-button type="text" @click="goback"><i class="el-icon-back subtitle"></i></el-button>编辑{{this.editedFarm.farmName}}一次系统图
        </h2>
      </el-col>
      <el-col :span="11">
        <el-input style="width: 22vw;padding: 20px 0px 15px 0px;float: right"  placeholder="如需修改风场名，在此输入" v-model="editedFarm.newFarmName">
          <template slot="prepend"><i class="el-icon-edit"></i></template>
        </el-input>
<!--        <el-input placeholder="如需修改风场名，在此输入" prefix-icon="el-icon-edit" v-model="editedFarm.newFarmName"> </el-input>-->
      </el-col>
      <el-col :span='3'>
        <div style="padding: 20px 30px 15px 45px;float: right">
          <el-button class="el-green-button" type="primary" @click="submitFarm()">提交</el-button>
        </div>
      </el-col>
    </el-row>
    <hr style="border-bottom: none;border-color: #8c939d"/>
    <el-row type="flex" justify="space-between" :gutter="20" style="margin-top: 5vh">
      <el-col>
        <el-form :inline="true" :model="editedFarm" class="demo-form-inline">
          <el-col :span="18" :offset="5">
            <el-form-item>
              <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-change="fileChange"
                :auto-upload=false
                list-type="picture"
                :limit="1">
                <el-image
                  v-if="imageUrl"
                  style="width:90vh; height: 65vh"
                  :src="imageUrl"
                  fit="fill"></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
<!--              <el-upload-->
<!--                class="upload-demo"-->
<!--                :auto-upload=false-->
<!--                action=""-->
<!--                :on-preview="handlePreview"-->
<!--                :on-remove="handleRemove"-->
<!--                :on-change="fileChange"-->
<!--                list-type="picture"-->
<!--                :limit="1">-->
<!--                <el-button class="el-blue-button" size="small" type="primary">点击上传</el-button>-->
<!--              </el-upload>-->
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/network/request'
import { baseURL } from '@/config/baseConfig'
export default {
  name: 'editFarm',
  data () {
    return {
      editedFarm: {
        farmId: '',
        farmName: '',
        farmType: '',
        pic: [],
        newFarmName: ''
      },
      // queryCondition: {
      //   farmId: '',
      //   farmName: '',
      //   farmType: ''
      // },
      imageUrl: ''
    }
  },
  inject: ['reload'],
  created () {
    this.editedFarm.farmId = this.$route.query.data
    var that = this
    request({
      method: 'get',
      url: '/bulletin/getshowcase',
      params: {
        id: this.editedFarm.farmId
      }
    }).then(res => {
      that.editedFarm.farmName = res.data.data.name
      // that.editedFarm.newFarmName = res.data.data.name
      that.editedFarm.farmType = res.data.data.type
      that.imageUrl = baseURL + '/' + res.data.data.imgurl
    }).catch((error) => {
      console.log(error)// 异常
    })
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    fileChange (file, fileList) {
      console.log(fileList)
      this.editedFarm.pic = fileList
      this.imageUrl = file.url
    },
    goback: function () {
      console.log('huitui')
      this.$router.back(-1)
    },
    submitFarm () {
      console.log(this.editedFarm.pic.length)
      // if (this.editedFarm.pic.length === 0) {
      //   this.$message({
      //     type: 'info',
      //     message: '修改成功'
      //   })
      //   this.$router.back(-1)
      //   return
      // }
      const fd = new FormData()
      fd.append('id', this.editedFarm.farmId)
      if (this.editedFarm.newFarmName.length === 0) {
        console.log('旧名字')
        fd.append('name', this.editedFarm.farmName)
      } else {
        console.log('新名字')
        fd.append('name', this.editedFarm.newFarmName)
      }
      fd.append('type', this.editedFarm.farmType)
      this.editedFarm.pic.forEach(item => {
        fd.append('pic', item.raw)
      })
      fd.append('randomID', this.$store.state.user.userId)
      // console.log(fd)
      console.log(this.editedFarm.pic)
      request({
        method: 'post',
        url: '/bulletin/updateshowcase',
        data: fd
      }).then(res => {
        console.log('接口调用返回：')
        console.log(res.data.message)
        if (res.data.message === '修改成功') {
          this.$message({
            type: 'info',
            message: '修改成功'
          })
          this.$router.back(-1)
        }
      }).catch((error) => {
        console.log(error)// 异常
      })
    }
  }
}
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  >>>.el-input-group__prepend {
    width: 10px;
    padding-right: 0;
    font-size: large;
    background-color: rgb(48,53,78);
    border:none;
  }
</style>
